<template>
  <div class="home-special" ref=target>
    <HomePanel title="最新专题">
      <template #right><XtxMore path="/" /></template>
        <!-- 面板内容 -->
        <Transition name="fade">
          <ul class="goods-list">
            <li v-for="item in list" :key="item.id">
              <RouterLink to="/">
                <div class="meta">
                    <img v-lazy="item.cover" alt="">
                     <p class="title">
                        <span class="top ellipsis">{{item.title}}</span>
                        <span class="sub ellipsis">{{item.summary}}</span>
                    </p>
                    <span class="price">￥ {{item.lowestPrice}}</span>
                </div>
                <div class="info">
                    <span class="like"><i class="iconfont icon-hart1"></i>{{item.collectNum	}}</span>
                    <span class="view"><i class="iconfont icon-see"></i>{{item.viewNum}}</span>
                    <span class="reply"><i class="iconfont icon-message"></i>{{item.replyNum}}</span>
                </div>
              </RouterLink>
            </li>
          </ul>
          <!-- <HomeSkeleton bg="#f0f9f4" v-else /> -->
        </Transition>
    </HomePanel>
  </div>
</template>
<script>
import HomePanel from './HomePanel.vue'
import { findSpecial } from '@/api/home'
import { useLazyData } from '@/hooks'
import {ref} from 'vue'
export default {
    name:'HomeSpecial',
    components:{
        HomePanel
    },
    setup(){
        const target=ref(null)
        const result = useLazyData(target,findSpecial)
        return {list:result,target}
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/styles/mixins.less';
.home-special{
 .goods-list{
     display: flex;
     justify-content: space-between;
     li{
         width: 404px;
         height: 360px;
         .hoverShadow();
       .meta{
            height: 288px;
             width: 404px;
             position: relative;
             background-color: #fff;
             background-image: linear-gradient(0deg,rgba(0,0,0,.8),transparent 50%);
             .title{
                 display: flex;
                 flex-direction: column;
                 position: absolute;
                 bottom: 0;
                 left: 0;
                 padding: 12px;
                 width: 100%;
                     .top{
                           font-size: 22px;
                           color: #fff;
                           display: block;
                           
                     }
                    .sub{
                           font-size: 19px;
                           color: #999;
                           display: block;
                     }
                 
             }
             .price{
                 position: absolute;
                 bottom: 25px;
                 right: 16px;
                 padding: 4px 8px 4px 7px;
                 color: #cf4444;
                 background: #fff;
                 border-radius: 2px;
                 font-size: 17px;
             }
             img{
             height: 100%;
             width: 100%;
         }
       }
        .info{
            height: 72px;
            line-height: 72px;
            padding: 0 20px;
            font-size: 16px;
            i {
               display: inline-block;
                width: 15px;
                height: 14px;
                margin-right: 5px;
                color: #999;
            }
            .like,
            .view {
                float: left;
                margin-right: 25px;
                vertical-align: middle;
            }
            .reply {
                float: right;
                vertical-align: middle;
            }
        }

     }
 }
}
</style>